<template>
  <common-list>
    <common-table v-loading="loading" slot="content" :data="list">
      <el-table-column
        label="类型"
        align="left"
        prop="filterType"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        label="内容"
        align="left"
        prop="filterRule"
        show-overflow-tooltip
      />
      <el-table-column
        label="描述"
        align="left"
        prop="remark"
        show-overflow-tooltip
      />
      <el-table-column
        label="状态"
        align="left"
        prop="filterStatus"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.filterStatus === 0" type="success"
            >启用
          </el-tag>
          <el-tag v-if="scope.row.filterStatus === 1" type="danger"
            >停用</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" width="100px">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleAdd(scope.row)"
            v-hasPermi="['apisecurity:flowfilter:edit']"
            data-test="rule_variable-button-edit"
            >编辑
          </el-button>

          <el-button
            v-hasPermi="['apisecurity:flowfilter:status']"
            type="text"
            @click="handleShake(scope.row)"
            :disabled="scope.row.isDisabledForShake"
          >
            <span v-if="scope.row.filterStatus === 1">启用</span>
            <span v-if="scope.row.filterStatus === 0">停用</span>
          </el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <flow-edit ref="flowEdit" @submitForm="submitForm"></flow-edit>
  </common-list>
</template>

<script>
import {
  fetchList,
  flowFilterUpdateStatus,
} from "@/api/apisecurity/flowfilter/flowfilter";
import FlowEdit from "./components/flowEdit.vue";
import BaseList from "@/mixins/BaseList";
export default {
  mixins: [BaseList],
  components: {
    FlowEdit,
  },
  data() {
    return {
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      list: [],
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      fetchList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows.reduce((r, c) => {
              r.push({
                ...c,
                isDisabledForShake: false,
              });
              return r;
            }, []);
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .catch((res) => {
          this.list = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleAdd(row) {
      if (row?.filterStatus === 0) {
        return this.$GlobalErrorConfirm("编辑", "启用状态下不允许编辑");
      } else {
        this.$refs.flowEdit.show(row ? { ...row } : {});
      }
    },

    changeStatus(row) {
      return new Promise((resolve, reject) => {
        flowFilterUpdateStatus({
          filterStatus: row.filterStatus === 1 ? 0 : 1,
          id: row.id,
        })
          .then((res) => {
            if (res && res.code === 200) {
              this.$GlobalSuccessMessage("操作成功");
              resolve(res);
              this.list.find((item) => {
                return item.id === row.id;
              }).filterStatus = row.filterStatus === 1 ? 0 : 1;
            } else {
              this.$GlobalErrorConfirm("操作失败", res.msg);
              reject();
            }
          })
          .catch(() => reject());
      });
    },

    submitForm() {
      this.getList();
    },
  },
};
</script>

<style lang="scss"></style>
